<template>
  <el-dialog
    ref="wx-dialog"
    append-to-body
    :visible.sync="visible"
    :close-on-click-modal="false"
    :width="width"
    :before-close="cancel"
    @open="handlerOpenDialog"
  >
    <div slot="title" class="title">
      {{ title ? title : isAdd ? '新增' : '编辑' }}
      <!-- <slot name="title-tools" /> -->
    </div>
    <slot />
    <slot v-if="footer" name="footer" class="dialog-footer">
      <span slot="footer">
        <template v-if="!$scopedSlots['title-tools']">
          <el-button type="text" class="table-btn" @click="cancel">取消</el-button>
          <el-button class="table-btn" type="primary" @click="ok">{{ okBtn }}</el-button>
        </template>
        <div v-else>
          <slot name="title-tools" />
        </div>
      </span>
    </slot>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: ''
    },
    okBtn: {
      type: String,
      default: '确定'
    },
    isAdd: {
      type: Boolean,
      default: false
    },
    footer: {
      type: Boolean,
      default: true
    },
    height: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      disabled: false
    }
  },
  computed: {
    bodyHeight() {
      if (this.height) {
        return { 'max-height': this.height, overflow: 'hidden' }
      }
      return {}
    }
  },
  methods: {
    ok() {
      this.disabled = true
      this.$emit('ok')
    },
    cancel() {
      this.$emit('close')
      this.toggleVisible(false)
    },
    handlerOpenDialog() {
      this.disabled = false
      this.$emit('show')
    },
    toggleVisible(val) {
      this.$emit('update:visible', val)
    }
  }
}
</script>

<style lang="scss">
  .el-dialog {
    border-radius: 20px;
  }
  /* 标题左对齐 */
  .el-dialog__header {
    padding: 22px 31px;
    text-align: left;
    border-bottom: 1px solid #ecf1f2;
    /* background: rgb(210 210 210); */
    .title {
      font-size: 20px;
      font-weight: 600;
      color:rgba(0,0,0,1);
      display: flex;
      justify-content: space-between;
      padding-right: 30px;
    }
  }
  .el-dialog__headerbtn {
    font-size: 24px;
  }
  .el-dialog__body {
    max-height: 60vh;
    overflow: auto;
    padding: 29px 22px;
  }
  .el-dialog__footer {
    border-top: 1px solid #ecf1f2;
    padding: 15px 29px;
  }
</style>
